<template>
    <div class="leftCenter">
        <div v-if="isLiuliang">
            <div v-for="(item,index) in threeA" :key="index">
                <div
                    :id="'yuanzhu'+ index"
                    style="position: absolute; left: 0px; top: 0px;z-index:3;"
                >
                    <div style="text-align:center">{{item.renshu}}</div>
                    <div class="yuanzhu"></div>
                </div>
            </div>
        </div>
        <div class="leftCenterLeft">
            <div class="title">
                <div class="titleImg"></div>
                <div>好景致</div>
            </div>
            <div class="list">
                <div class="list1" @click="three3A">
                    <div class="listImg"></div>
                    <div class="listContent">
                        <div>11</div>
                        <div class="num-content">3A以上景区（个）</div>
                    </div>
                </div>
                <div class="list2" @click="liuliang">
                    <div class="listImg"></div>
                    <div class="listContent">
                        <div>1449.32万</div>
                        <div class="num-content">景区客流量（年）</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="leftCenterRight">
            <div class="leftCenterCharts1">
                <div id="leftCenterCharts1"></div>
                <div>
                    <p @click="shengwaiFX">省外客流来源Top5</p>
                </div>
            </div>
            <div class="leftCenterCharts2">
                <div id="leftCenterCharts2"></div>
                <div>
                    <p @click="shengneiFX">省内客流来源Top5</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
const shengwaigroup = new GV.GraphicGroup();
const shengneigroup = new GV.GraphicGroup();
export default {
    data() {
        return {
            isThree: false,
            isLiuliang: false,
            isShengnei: false,
            isShengwai: false,
            threeA: [
                {
                    name: "根宫佛国文化旅游区",
                    lonLat: [118.399128, 29.14132],
                    dengji: "5A",
                    weizhi: "",
                    renshu: "600万",
                },
                {
                    name: "七彩长虹旅游景区",
                    lonLat: [118.237213, 29.226437],
                    dengji: "4A",
                    weizhi: "",
                    renshu: "400万",
                },
                {
                    name: "古田山保护区",
                    lonLat: [118.161613, 29.261416],
                    dengji: "4A",
                    weizhi: "",
                    renshu: "300万",
                },
                {
                    name: "未来音全息科技馆",
                    lonLat: [118.3918, 29.083761],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "400万",
                },
                {
                    name: "秀丽潭头景区",
                    lonLat: [118.312399, 29.08536],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "350万",
                },
                {
                    name: "金溪桃韵景区",
                    lonLat: [118.40993, 29.176694],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "350万",
                },
                {
                    name: "九溪龙门景区",
                    lonLat: [118.335919, 29.472327],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "200万",
                },
                {
                    name: "霞山古村落",
                    lonLat: [118.416643, 29.33639],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "240万",
                },
                {
                    name: "砸碗花湿地公园",
                    lonLat: [118.42563, 29.289723],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "150万",
                },
                {
                    name: "钱江源森林公园",
                    lonLat: [118.221823, 29.399964],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "200万",
                },
                {
                    name: "南华山风景区",
                    lonLat: [118.173021, 29.016893],
                    dengji: "3A",
                    weizhi: "",
                    renshu: "230万",
                },
            ],
        };
    },
    methods: {
        draw1() {
            let data = [
                {
                    name: "上海",
                    value: 300,
                },
                {
                    name: "江苏",
                    value: 150,
                },
                {
                    name: "安徽",
                    value: 130,
                },
                {
                    name: "福建",
                    value: 80,
                },
                {
                    name: "广东",
                    value: 50,
                },
            ];
            let arrName = getArrayValue(data, "name");
            let arrValue = getArrayValue(data, "value");
            let sumValue = eval(arrValue.join("+"));
            let objData = array2obj(data, "name");
            let optionData = getData(data);

            function getArrayValue(array, key) {
                var key = key || "value";
                var res = [];
                if (array) {
                    array.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }

            function array2obj(array, key) {
                var resObj = {};
                for (var i = 0; i < array.length; i++) {
                    resObj[array[i][key]] = array[i];
                }
                return resObj;
            }
            function getData(data) {
                var res = {
                    series: [],
                    yAxis: [],
                };
                for (let i = 0; i < data.length; i++) {
                    // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
                    res.series.push({
                        name: "",
                        type: "pie",
                        clockWise: true, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [73 - i * 17 + "%", 68 - i * 17 + "%"],
                        center: ["55%", "50%"],
                        // label: {
                        //     show: true,
                        // },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            borderWidth: 5,
                        },
                        data: [
                            {
                                value: data[i].value,
                                name: data[i].name,
                                label: {
                                    show: false,
                                    // padding:[0 ,0, 0, -60],
                                    // fontSize:8,
                                },
                                labelLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#235894",
                                    },
                                },
                            },
                            {
                                value: 500 - data[i].value,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                        ],
                    });
                    res.series.push({
                        name: "",
                        type: "pie",
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
                        center: ["50%", "55%"],
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            borderWidth: 5,
                        },
                        data: [
                            {
                                value: 7.5,
                                itemStyle: {
                                    color: "rgba(3, 0, 0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                            {
                                value: 2.5,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                        ],
                    });
                    res.yAxis.push(
                        ((data[i].value / sumValue) * 100).toFixed(2) + "%"
                    );
                }
                return res;
            }
            let option = {
                // grid: [{
                //     left: '200%',
                //     right: 50,
                //     top: '55%',
                //     height: '35%'
                // }],
                legend: {
                    show: true,
                    icon: "none",
                    top: "center",
                    top: "11%",
                    bottom: "53%",
                    left: "25",
                    data: arrName,
                    width: 10,
                    padding: [0, 1],
                    itemGap: 2,
                    formatter: function(name) {
                        return "{title|" + name + "}"
                    },

                    textStyle: {
                        rich: {
                            title: {
                                fontSize: 7,
                                lineHeight: 7,
                                color: "rgb(0, 178, 246)"
                            },
                            value: {
                                fontSize: 10,
                                lineHeight: 10,
                                color: "#fff"
                            }
                        }
                    },
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{a}<br>{b}:{c}万({d}%)",
                },
                color: [
                    "rgb(24, 183, 142)",
                    "rgb(1, 179, 238)",
                    "rgb(22, 75, 205)",
                    "rgb(52, 52, 176)",
                ],
                xAxis: [
                    {
                        show: false,
                    },
                ],
                series: optionData.series,
            };
            let myChart = this.$echarts.init(
                document.getElementById("leftCenterCharts1")
            );
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        draw2() {
            let data = [
                {
                    name: "杭州",
                    value: 210,
                },
                {
                    name: "衢州",
                    value: 180,
                },
                {
                    name: "宁波",
                    value: 150,
                },
                {
                    name: "温州",
                    value: 120,
                },
                {
                    name: "台州",
                    value: 80,
                },
            ];
            let arrName = getArrayValue(data, "name");
            let arrValue = getArrayValue(data, "value");
            let sumValue = eval(arrValue.join("+"));
            let objData = array2obj(data, "name");
            let optionData = getData(data);

            function getArrayValue(array, key) {
                var key = key || "value";
                var res = [];
                if (array) {
                    array.forEach(function (t) {
                        res.push(t[key]);
                    });
                }
                return res;
            }

            function array2obj(array, key) {
                var resObj = {};
                for (var i = 0; i < array.length; i++) {
                    resObj[array[i][key]] = array[i];
                }
                return resObj;
            }
            function getData(data) {
                var res = {
                    series: [],
                    yAxis: [],
                };
                let formatNumber = function (num) {
                    let reg = /(?=(\B)(\d{3})+$)/g;
                    return num.toString().replace(reg, ",");
                };
                for (let i = 0; i < data.length; i++) {
                    // console.log([70 - i * 15 + '%', 67 - i * 15 + '%']);
                    res.series.push({
                        name: "",
                        type: "pie",
                        clockWise: true, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [73 - i * 17 + "%", 68 - i * 17 + "%"],
                        center: ["55%", "50%"],
                        label: {
                            minAngle: 30,
                        },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            borderWidth: 5,
                        },
                        data: [
                            
                            {
                                value: data[i].value,
                                name: data[i].name,
                                label: {
                                    show: false,
                                    // padding:[0 ,0, 0, -60],
                                    // fontSize:8,
                                },
                                labelLine: {
                                    show: false,
                                    lineStyle: {
                                        color: "#235894",
                                    },
                                },
                            },
                            {
                                value: 400 - data[i].value,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                        ],
                    });
                    res.series.push({
                        name: "",
                        type: "pie",
                        silent: true,
                        z: 1,
                        clockWise: false, //顺时加载
                        hoverAnimation: false, //鼠标移入变大
                        radius: [90 - i * 15 + "%", 83 - i * 15 + "%"],
                        center: ["100%", "55%"],
                        label: {
                            show: false,
                        },
                        itemStyle: {
                            label: {
                                show: false,
                            },
                            labelLine: {
                                show: false,
                            },
                            borderWidth: 5,
                        },
                        data: [
                            {
                                value: 7.5,
                                itemStyle: {
                                    color: "rgba(3, 0, 0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                            {
                                value: 2.5,
                                name: "",
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0,
                                },
                                tooltip: {
                                    show: false,
                                },
                                hoverAnimation: false,
                            },
                        ],
                    });
                    res.yAxis.push(
                        ((data[i].value / sumValue) * 100).toFixed(2) + "%"
                    );
                }
                return res;
            }
            let option = {
                grid: {
                    top: "0px",
                    left: "0px",
                    right: "20px",
                    bottom: "0px",
                },
                legend: {
                    show: true,
                    icon: "none",
                    top: "center",
                    top: "11%",
                    bottom: "53%",
                    left: "25",
                    data: arrName,
                    width: 5,
                    padding: [0, 1],
                    itemGap: 2,
                    formatter: function (name) {
                        return "{title|" + name + "}";
                    },

                    textStyle: {
                        rich: {
                            title: {
                                fontSize: 7,
                                lineHeight: 7,
                                color: "rgb(0, 178, 246)",
                            },
                            value: {
                                fontSize: 6,
                                lineHeight: 6,
                                color: "#fff",
                            },
                        },
                    },
                },
                tooltip: {
                    show: true,
                    trigger: "item",
                    formatter: "{a}<br>{b}:{c}({d}%)",
                },
                color: [
                    "rgb(24, 183, 142)",
                    "rgb(1, 179, 238)",
                    "rgb(22, 75, 205)",
                    "rgb(52, 52, 176)",
                ],
                xAxis: [
                    {
                        show: false,
                    },
                ],
                series: optionData.series,
            };
            let myChart = this.$echarts.init(
                document.getElementById("leftCenterCharts2")
            );
            myChart.setOption(option);
            window.onresize = function () {
                myChart.resize();
            };
        },
        three3A() {
            this.isThree = !this.isThree;
            if (this.isThree) {
                this.threeA.forEach((item, index) => {
                    this.$cp.addBillboardAndLabel(
                        "3A" + index,
                        item.lonLat,
                        "./data/icon/blue.png",
                        item.name,
                        "leftClick",
                        this.LeftClick()
                    );
                });
                this.$cp.flyTo(
                    118.2898576964453,
                    28.65449034865131,
                    44359,
                    6.24830855283551,
                    -0.6268615740223096,
                    0.0004433207087544133
                );
            } else {
                this.threeA.forEach((item, index) => {
                    viewer.entities.removeById("3A" + index);
                });
            }
        },
        liuliang() {
            this.isLiuliang = !this.isLiuliang;
            let that = this;
            if (this.isLiuliang) {
                this.preRenderListener = viewer.scene.preRender.addEventListener(
                    () => {
                        this.threeA.forEach((item, index) => {
                            const oneDiv = window.document.getElementById(
                                "yuanzhu" + index
                            );
                            oneDiv.style.display = "block";
                            let elWidth = oneDiv.offsetWidth;
                            let elHeight = oneDiv.offsetHeight; // + 60
                            const scratch = new Cesium.Cartesian2(); //cesium二维笛卡尔 笛卡尔二维坐标系就是我们熟知的而二维坐标系；三维也如此
                            let domPosition = Cesium.Cartesian3.fromDegrees(
                                item.lonLat[0],
                                item.lonLat[1]
                            );
                            const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
                                domPosition,
                                scratch
                            ); //cartesianToCanvasCoordinates 笛卡尔坐标（3维度）到画布坐标
                            if (Cesium.defined(canvasPosition)) {
                                // 根据元素宽高及当前点屏幕坐标进行偏移
                                oneDiv.style.top =
                                    canvasPosition.y - elHeight * 1.8 + "px";
                                oneDiv.style.left =
                                    canvasPosition.x + elWidth / 2 + "px";
                            }
                        });
                    }
                );
            } else {
                if (this.preRenderListener) {
                    this.preRenderListener();
                    this.preRenderListener = null;
                }
            }
        },
        shengwaiFX() {
            this.isShengwai = !this.isShengwai;
            // 开化 118.419411,29.143598
            let shengwaiArr = [
                [
                    [121.46, 31.28],
                    [118.419411, 29.143598],
                ],
                [
                    [120.26, 32.54],
                    [118.419411, 29.143598],
                ],
                [
                    [117.28, 31.86],
                    [118.419411, 29.143598],
                ],
                [
                    [118.31, 26.07],
                    [118.419411, 29.143598],
                ],
                [
                    [113.98, 22.82],
                    [118.419411, 29.143598],
                ],
            ];
            let shengwaiCity = [
                { name: "上海", lonLat: [121.46, 31.28] },
                { name: "江苏", lonLat: [120.26, 32.54] },
                { name: "安徽", lonLat: [117.28, 31.86] },
                { name: "福建", lonLat: [118.31, 26.07] },
                { name: "广东", lonLat: [113.98, 22.82] },
            ];
            if (this.isShengwai) {
                //循环1
                shengwaiArr.forEach((item, index) => {
                    let arrow = new GV.ParabolaLineGraphic({
                        positions: [
                            new GV.GeoPoint(item[0][0], item[0][1], 20),
                            new GV.GeoPoint(item[1][0], item[1][1], 20),
                        ],
                        lineStyle: new GV.DynamicStyle({
                            color: "#00FF99",
                            icon: GV.DynamicIconEnum.Arrow,
                            duration: 1000,
                        }),
                        width: index * 3 == 0 ? 2 : index * 3, //线宽
                        factor: 50000,
                        step: 50,
                        interpolation: true,
                    });
                    shengwaigroup.add(arrow);
                });
                shengwaiCity.forEach((item, index) => {
                    let circleScan = new GV.SpreadGraphic({
                        spreadColor: "#00FF99",
                        position: new GV.GeoPoint(
                            item.lonLat[0],
                            item.lonLat[1]
                        ),
                        radius: 150000,
                        duration: 4000,
                    });
                    shengwaigroup.add(circleScan);
                    this.$cp.addOnlyLabel(
                        "shengwai" + index,
                        [item.lonLat[0], item.lonLat[1]],
                        item.name,
                        "leftClik",
                        this.LeftClick
                    );
                    this.$cp.flyTo(
                        117.08802822962527,
                        14.6284114915938,
                        2542405,
                        6.209108126688973,
                        -1.0928661746134498,
                        0.0004738359666998093
                    );
                });

                viewer.graphicLayer.add(shengwaigroup);
            } else {
                viewer.graphicLayer.remove(shengwaigroup);
                shengwaiCity.forEach((item, index) => {
                    viewer.entities.removeById("shengwai" + index);
                });
            }
        },
        shengneiFX() {
            this.isShengnei = !this.isShengnei;
            let shengneiArr = [
                [
                    [120.15, 30.28],
                    [118.419411, 29.143598],
                ],
                [
                    [118.87, 28.93],
                    [118.419411, 29.143598],
                ],
                [
                    [121.55, 29.88],
                    [118.419411, 29.143598],
                ],
                [
                    [120.7, 28.0],
                    [118.419411, 29.143598],
                ],
                [
                    [121.43, 28.68],
                    [118.419411, 29.143598],
                ],
            ];
            let shengneiCity = [
                { name: "杭州", lonLat: [120.15, 30.28] },
                { name: "衢州", lonLat: [118.87, 28.93] },
                { name: "宁波", lonLat: [121.55, 29.88] },
                { name: "温州", lonLat: [120.7, 28.0] },
                { name: "台州", lonLat: [121.43, 28.68] },
            ];
            if (this.isShengnei) {
                //循环1
                shengneiArr.forEach((item, index) => {
                    let arrow = new GV.ParabolaLineGraphic({
                        positions: [
                            new GV.GeoPoint(item[0][0], item[0][1], 20),
                            new GV.GeoPoint(item[1][0], item[1][1], 20),
                        ],
                        lineStyle: new GV.DynamicStyle({
                            color: "#00FF99",
                            icon: GV.DynamicIconEnum.Arrow,
                            duration: 1000,
                        }),
                        width: index * 3 == 0 ? 2 : index * 3, //线宽
                        factor: 50000,
                        step: 50,
                        interpolation: true,
                    });
                    shengneigroup.add(arrow);
                });
                shengneiCity.forEach((item, index) => {
                    let circleScan = new GV.SpreadGraphic({
                        spreadColor: "#00FF99",
                        position: new GV.GeoPoint(
                            item.lonLat[0],
                            item.lonLat[1]
                        ),
                        radius: 50000,
                        duration: 4000,
                    });
                    shengneigroup.add(circleScan);
                    this.$cp.addOnlyLabel(
                        "shengnei" + index,
                        [item.lonLat[0], item.lonLat[1]],
                        item.name,
                        "leftClik",
                        this.LeftClick
                    );
                    this.$cp.flyTo(
                        120.4512892051776,
                        24.392426887839573,
                        926964,
                        6.209139470908212,
                        -1.09264729689247,
                        0.00043853438743912676
                    );
                });
                viewer.graphicLayer.add(shengneigroup);
            } else {
                viewer.graphicLayer.remove(shengneigroup);
                shengneiCity.forEach((item, index) => {
                    viewer.entities.removeById("shengnei" + index);
                });
            }
        },
        LeftClick() {},
    },
    mounted() {
        this.draw1();
        this.draw2();
    },
};
</script>
<style>
.yuanzhu {
    position: relative;
    height: 100px;
    width: 50px;
    background: rgba(240, 32, 124, 0.3);
    margin: 0 auto;
    margin-top: 10px;
    z-index: 999;
    
}
.yuanzhu:before {
    position: absolute;
    top: -10px;
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: rgba(240, 32, 124, 1);
    z-index: 998;
}
.yuanzhu:after {
    position: absolute;
    bottom: -12px;
    content: "";
    display: block;
    width: 50px;
    height: 20px;
    border-radius: 50%;
    background: rgba(240, 32, 124, 1);
    z-index: 997;
}
</style>
<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.leftCenter
    width vw(530)
    height vh(212)
    box-sizing border-box
    background url('/images/left2.png') no-repeat
    background-size cover
    display flex
    padding vh(20) vw(30)
    .leftCenterLeft
        width:vw(200)
        flex:2
        .title
            display flex
            padding-bottom vh(15)
            font-size vw(18)
            .titleImg
                width vw(23)
                height vh(23)
                background url('/images/jingzhi.png') no-repeat
                background-size cover
                background-size 100% 100%
                margin-right vw(5)
                cursor:pointer
        .list
            width vw(250)
            // height vh(150)
            display flex
            flex-direction column
            font-size vw(18)
            // justify-content space-around
        .list1
            padding vh(10) 0 vh(10) vw(15)
            width vw(200)
            height vh(45)
            display flex
            border-radius vw(3)
            background linear-gradient(to right, #6199A9, rgba(0, 0, 0, 0))
            margin-bottom vh(10)
            .listImg
                width vw(43)
                height vh(50)
                background url('/images/jingzhi1.png') no-repeat
                background-size cover
                cursor:pointer 
            .listContent
                color #45F4F7
                font-size vw(18)
                padding vh(3) vw(10)
                width vw(100)
                .num-content
                    font-size vw(12)
                    color #fff
                    padding vh(4) 0
        .list2
            padding vh(10) 0 vh(5) vw(15)
            width vw(200)
            height vh(50)
            display flex
            border-radius vw(3)
            background linear-gradient(to right, #6199A9, rgba(0, 0, 0, 0))
            .listImg
                width vw(43)
                height vh(50)
                background url('/images/jingzhi2.png') no-repeat
                background-size cover
                cursor:pointer 
            .listContent
                color #fff
                color #45F4F7
                font-size vw(18)
                padding vh(3) vw(10)
                width vw(100)
                .num-content
                    font-size vw(12)
                    color #fff
                    padding vh(4) 0
    .leftCenterRight
        display flex
        margin-top vh(5)
        flex:3
        p
            font-size vw(12)
            margin-top vh(10)
            width vw(140)
            text-align center
        .leftCenterCharts1
            // width:vw(100)
            #leftCenterCharts1
                width vw(140)
                height vh(140)
        .leftCenterCharts2
            // width:vw(100)
            #leftCenterCharts2
                width vw(140)
                height vh(140)
</style>